<template>
  <div class="box">
    <div class="container">
      <header class="header">
        <van-icon name="arrow-left" size="0.4rem" @click="goBack"/>
        <van-icon name="cart-o" size="0.4rem" @click="goCart"/>
      </header>
      <div class="content">
        <div class="itemImg">
          <img :src="pic" alt="">
        </div>
        <div class="itemInfo">
          <p>
            {{ title }}
          </p>
          <span class="price">{{ Math.round((count) * 0.88) | moneyFilter}}</span>
          <span class="fprice">{{ count | moneyFilter}}</span>
        </div>
      </div>
    </div>
    <footer class="footer">
      <van-button color="#ff6600" size="large" @click="insetGoods">加入购物车</van-button>
    </footer>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import { Icon, Button } from 'vant'

Vue.use(Icon)
Vue.use(Button)
export default {
  data () {
    return {
      title: '',
      pic:'',
      count:'',
      id:'',
      goods: []
    }
  },
  mounted () {
    const { $route: { params: { id } } } = this
    axios.get('https://www.daxunxun.com/detail?id=' + id).then(res => {
      console.log(res.data[0])
      this.title = res.data[0].title
      this.pic = res.data[0].images.small
      this.count = res.data[0].collect_count
      this.id = res.data[0].id
    })
  },
  methods: {
    goBack () {
      this.$router.back()
    },
    goCart () {
      this.$router.push({ path: '/cart' })
    },
    insetGoods () {
      this.goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
				if(this.goods.length == 0){
					this.goods.push({
						id : this.id,
						num : 1 
					})
				}else{
					let i = 0;
					let onoff = this.goods.some((val,index)=>{
						i = index;
			        	return val.id == this.id;
					})
					if(onoff){
						this.goods[i].num +=  1 
					}else{
							this.goods.push({
							id : this.id,
							num : 1
						})
					}
				}
      localStorage.setItem('goods', JSON.stringify(this.goods))
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/lib/reset.scss";

.container {
	@include rect(100%,100%);
	@include overflow(auto);
	.header {
		@include flexbox();
		@include justify-content(space-between);
    @include align-items();
    @include font-size(.18rem);
	}	
	.content {
		@include overflow(auto);
		@include flexbox();
		.itemImg {
      @include rect(100%,4rem);
      img {
        @include rect(100%,100%);
      }
    }
    .itemInfo {
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        @include font-size(.22rem);
      }
      .price {
        color: red;
        margin-top: 0.1rem;
      }
      .fprice {
        color:#aaa;
        text-decoration: line-through;
      }
    }
  }	
}	
</style>